<template>
  <div>
    <!-- <a-card style="margin: 10px 0;"> -->
    <a-row>
      <a-col :span="24">
        <a-form layout="inline" :form="form" style="margin-left:10px" @submit="handleSubmit">
          <a-form-item label="颜色编号">
            <a-input allow-clear placeholder="请输入颜色编号" v-model="colorCode"></a-input>
          </a-form-item>
          <a-form-item label="销售色">
            <a-input allow-clear placeholder="请输入销售色" v-model="colorName"></a-input>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" html-type="submit">搜索</a-button>
          </a-form-item>
        </a-form>
      </a-col>
    </a-row>
    <!-- </a-card>
    <a-card
      title="颜色清单"
      
    > -->
    <a-table bordered :columns="shop" :pagination="false" style="margin-top:20px"
      :data-source="searchList.length || showSearch ? searchList : colorList">
      <span slot="colorStatus" slot-scope="txt, record" style="margin-left:5px">
        <span v-if="record.accColorStatus == 20">
          停用
        </span>
        <span v-else>
          启用
        </span>
      </span>
      <template slot="action" slot-scope="txt, record,i">
        <a class="mr-10" @click="toColor(record, i)">
          编辑
        </a>
        <a-popconfirm :title="`确定要删除该项吗?`" @confirm="deleteColor(i, record.index)" v-if="showDelete">
          <a class="mr-10">
            删除
          </a>
        </a-popconfirm>
        <a class="mr-10" @click="sync(record, 20)" v-if="record.accColorStatus == 10">
          停用
        </a>
        <a class="mr-10" @click="sync(record, 10)" v-if="record.accColorStatus == 20">
          启用
        </a>
      </template>
    </a-table>
    <a-button type="dashed" style="width: 100%;margin-top: 20px;" @click="toColor('')">
      <a-icon type="plus" />添加颜色
    </a-button>
    <colorAdd v-if="showColor" :colorDetail="colorDetail" :colorIndex="colorIndex" :supplyList="supplyList"
      @closeColor="closeColor">
    </colorAdd>
    <!-- </a-card> -->
  </div>
</template>
<script>
import { getColorList, getDictChildList } from '@api/material/index'
import colorAdd from './colorAdd.vue'
import DictItemListVue from '../../box/system/sysSetting/components/DictItemList.vue'

const shop = [
  {
    title: '颜色编号',
    dataIndex: 'colorCode'
  },
  {
    title: '销售色',
    dataIndex: 'colorName'
  },
  {
    title: '厂家色号',
    dataIndex: 'manufactorColorCode'
  },
  {
    title: '图案编号',
    dataIndex: 'patternCode'
  },
  {
    title: '颜色状态',
    scopedSlots: { customRender: 'colorStatus' }
  },
  {
    title: '过检针等级',
    dataIndex: 'checkGradeValue'
  },
  {
    title: '备注',
    dataIndex: 'remark'
  },
  {
    title: '操作',
    width: 220,
    scopedSlots: { customRender: 'action' }
  }
]
export default {
  components: {
    colorAdd
  },
  props: {
    accColorList: {
      type: Array,
      default: null
    },
    supplyList: {
      type: Array,
      default: null
    }
  },
  data() {
    return {
      shop,
      colorCode: '',
      colorName: '',
      form: this.$form.createForm(this),
      newsupplyList: [],
      gradeList: [],
      searchList: [],
      showColor: false,
      showSearch: false,
      colorDetail: {},
      colorIndex: null,
      showDelete: true,
      colorList: []
    }
  },
  watch: {
    accColorList(newVal, oldVal) {
      if (newVal && newVal !== oldVal) {
        this.colorList = newVal
      }
    }
  },
  created() {
    const { supplyList } = this.$props
    if (this.$route.query.examine == 10) {
      this.showDelete = false
    }
    this.newsupplyList = supplyList
    this.getGradeList()
  },
  mounted() {
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault()
      this.searchList = []
      this.showSearch = false
      if (this.colorCode && !this.colorName) {
        this.colorList.map((item, i) => {
          if (item.colorCode.indexOf(this.colorCode) >= 0) {
            const obj = item
            item.index = i
            this.searchList.push(obj)
          }
        })
      }
      if (!this.colorCode && this.colorName) {
        this.colorList.map((item, i) => {
          if (item.colorName.indexOf(this.colorName) >= 0) {
            const obj = item
            item.index = i
            this.searchList.push(obj)
          }
        })
      }
      if (this.colorCode && this.colorName) {
        this.colorList.map((item, i) => {
          if (item.colorName.indexOf(this.colorName) >= 0 && item.colorCode.indexOf(this.colorCode) >= 0) {
            const obj = item
            item.index = i
            this.searchList.push(obj)
          }
        })
      }
      if ((this.colorCode || this.colorName) && !this.searchList.length) {
        this.showSearch = true
      }
    },
    async loadAccColor() {
      const res = await getColorList({ accId: this.accId })
      if (res.code == 200) {
        this.colorList = res.data
      } else {
        if (res.msg) {
          this.$message.error(res.msg)
        } else {
          this.$message.error('获取颜色列表失败！')
        }
      }
    },
    sync(values, type) {
      if (this.searchList.length) {
        this.searchList.map(item => {
          if (item.materialColorId == values.materialColorId) {
            item.accColorStatus = type
          }
        })
        this.colorList.map(item => {
          if (item.materialColorId == values.materialColorId) {
            item.accColorStatus = type
          }
        })
      } else {
        this.colorList.map(item => {
          if (item.materialColorId == values.materialColorId) {
            item.accColorStatus = type
          }
        })
      }
    },
    toColor(record, i) {
      this.colorIndex = i
      this.colorDetail = record
      this.showColor = true
    },
    deleteColor(i, num) {
      if (this.searchList.length) {
        this.searchList = this.searchList.filter((item, index) => index != i)
        this.colorList = this.colorList.filter((item, index) => index != num)
      } else {
        this.colorList = this.colorList.filter((item, index) => index != i)
      }
      this.$emit('changeColor', this.colorList, 1)
    },
    async getGradeList() {
      const params = {
        name: 'CHECK_GRADE',
      }
      try {
        const res = await getDictChildList(params)
        if (res.code == 200) {
          this.gradeList = res.data
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('获取过检针等级列表失败！')
          }
        }
      } catch (error) {
        this.$message.error('获取过检针等级列表失败！')
      }
    },
    closeColor(values, colorIndex) {
      if (values) {
        if (this.searchList.length) {
          if (colorIndex || colorIndex === 0) {
            const newArr = this.colorList.filter(item => item.materialColorId == values.materialColorId)
            if (newArr.length > 1) {
              this.$message.error('该销售色已存在，请重新选择！')
            } else {
              this.searchList[colorIndex] = values
              const num = this.searchList[colorIndex].index
              this.colorList[num] = values
              this.showColor = false
              this.$emit('changeColor', this.colorList)
            }
          }
        } else {
          if (this.colorList.length) {
            if (colorIndex || colorIndex === 0) {
              const newArr = this.colorList.filter(item => item.materialColorId == values.materialColorId)
              if (newArr.length > 1) {
                this.$message.error('该销售色已存在，请重新选择！')
              } else {
                this.colorList[colorIndex] = values
                this.showColor = false
                this.$emit('changeColor', this.colorList)
              }
            } else {
              const newArr = this.colorList.filter(item => item.materialColorId == values.materialColorId)
              if (newArr.length) {
                this.$message.error('该销售色已存在，请重新选择！')
              } else {
                this.colorList.push(values)
                this.showColor = false
                this.$emit('changeColor', this.colorList)
              }
            }
          } else {
            this.colorList.push(values)
            this.showColor = false
            this.$emit('changeColor', this.colorList)
          }
        }
      } else {
        // console.log(1)
        this.showColor = false
      }
      console.log(this.colorList)
      // this.$forceUpdate()
    }
  }
}
</script>
